<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 6.25rem;
				height: 6.25rem;
				background-color: palevioletred;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var box = document.getElementById("box");
			box.onwheel = function(event) {
				var event = event || window.event;
				console.log(event.detail);
				if (event.wheelDelta > 0 || event.detail < 0) {
					box.style.height = (box.clientHeight - 10) + "px";
				} else {
					box.style.height = (box.clientHeight + 10) + "px";
				}
				
				// 使用addEventListener() 方法绑定响应函数的，
				// 取消默认行为时不能使用 return false
				// 需要使用时间event 来取消默认行为
				// 但是IE8不支持该数次那个。或报错。
				event.preventDefault || event.preventDefault();
				
				// 取消默認行為
				return false;
			}
			box.addEventListener("DOMMouseScroll", box.onwheel, false)
		</script>
	</body>
</html>
